<template>
  <div class="search">
    <NavBar />
    <div class="content">
      <!-- 搜索页面{{ this.inputText }} -->
      <RcmdBox :info="info"></RcmdBox>
    </div>

    <!-- 搜索不到内容 -->
    <el-empty v-if="empty" description="找不到内容 (╯°口°)╯(┴—┴"></el-empty>
  </div>
</template>

<script>
// 左边推荐列表
import RcmdBox from "../components/RcmdBox.vue";
import NavBar from "../components/NavBar.vue";
export default {
  data() {
    return {
      inputText: "",
      info: [],
      empty: false,
    };
  },
  mounted() {
    this.searchChange();
  },
  components: {
    NavBar,
    RcmdBox,
  },
  methods: {
    // 初始化页面
    searchChange() {
      // 跳转获取到的值
      this.inputText = this.$route.query.subject;
      this.$http({
        // 请求本地json文件
        method: "post",
        // url: "http://localhost:8080/mock/home-recommend-info.json",
        url: "/api/path/queryPath",
        // 上传的参数
        params: {
          current: 1,
          size: 5,
          title: this.inputText,
        }
      }).then(
        (res) => {
          console.log("搜索内容：" + res.message);
          this.info = res.data.data.queryList;
          if(!res.data.data.queryList){
            // 显示错误页面
            this.empty = true;
          }
        },
        (err) => {
          // 显示错误页面
          this.empty = true;
          console.error("数据获取失败！" + err);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100vh;
  /* 取消横向滚动条 */
  overflow-x: hidden;
  background: #f0f2f5;
}
.content {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
</style>